<template>
	<el-descriptions ref="ruleFormRef" :column="2" direction="vertical" v-loading="isLoading">

		<!-- <el-descriptions-item width="50%" :label='titles.id'>
			{{ isNullOrEmpty( formInline?.id ) }}
		</el-descriptions-item> -->
		<!-- <el-descriptions-item width="50%" :label='titles.projectId'>
			{{ isNullOrEmpty( formInline?.projectId ) }}
		</el-descriptions-item> -->
		<el-descriptions-item width="50%" :label='titles.facilitName'>
			{{ isNullOrEmpty(formInline?.facilitName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.groupId'>
			{{ isNullOrEmpty(formInline?.groupName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.position'>
			{{ isNullOrEmpty(formInline?.position == 1 ? '室内' : '室外') }}
		</el-descriptions-item>

		<el-descriptions-item width="50%" label='位置描述'>
			{{ isNullOrEmpty(formInline?.place) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.buildingId' v-if="formInline?.position == 1">
			{{ isNullOrEmpty(formInline?.buildingName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.drawingId' v-if="formInline?.position == 1">
			{{ isNullOrEmpty(formInline?.drawingName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.drawingPoint' >
			<!-- {{ isNullOrEmpty( formInline?.drawingPoints ) }} -->
			  <!-- v-if="formInline?.position == 1" -->
			<el-button class="" type="primary" @click="openDrawingPoints">图纸标记</el-button>
		</el-descriptions-item>
		<el-descriptions-item width="50%" v-if="formInline?.position == 2" :label='titles.markPoint'>
			<!-- {{ isNullOrEmpty( formInline?.markPoint ) }} -->
			<el-button class="" type="primary" @click="edit">地图标记</el-button>
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.facilitSN'>
			{{ isNullOrEmpty(formInline?.facilitSN) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.faciltType'>
			{{ isNullOrEmpty(formInline?.FacilitType) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.dutyUid'>
			{{ isNullOrEmpty(formInline?.dutyName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.outDate'>
			{{ isNullOrEmpty(formInline?.outDate) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.expireDate'>
			{{ isNullOrEmpty(formInline?.expireDate) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.fixDate'>
			{{ isNullOrEmpty(formInline?.fixDate) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.scrapDate'>
			{{ isNullOrEmpty(formInline?.scrapDate) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.mainteDate'>
			{{ isNullOrEmpty(formInline?.mainteDate) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.mainteCycle'>
			{{ isNullOrEmpty(formInline?.cycleValue) }}{{ isNullOrEmpty(formInline?.mainteCycle == 1 ? '周' :
				formInline?.mainteCycle == 2 ? '月' : '年') }}
		</el-descriptions-item>
		<!-- <el-descriptions-item width="50%" :label='titles.cycleValue'>
			{{ isNullOrEmpty( formInline?.cycleValue ) }}
		</el-descriptions-item> -->
		<el-descriptions-item width="50%" :label='titles.inspectionMode'>

			{{ isNullOrEmpty(formInline?.inspectionMode == 1 ? '不巡检' : formInline?.inspectionMode == 2 ? 'NFC巡检' :
				'二维码巡检') }}


		</el-descriptions-item>
		<el-descriptions-item v-if="formInline?.inspectionMode == 2" width="50%" :label='titles.NFC'>
			{{ isNullOrEmpty(formInline?.NFC) }}
		</el-descriptions-item>
		<el-descriptions-item v-if="formInline?.inspectionMode == 3" width="50%" :label='titles.QR'>
			{{ isNullOrEmpty(formInline?.QR) }}
		</el-descriptions-item>
		<el-descriptions-item v-if="formInline?.inspectionMode !== 1" width="50%" :label='titles.inspect'>

			<el-text v-for="(item, index) in formInline?.inspect">
				{{ isNullOrEmpty(item == 1 ? '拍照' : item == 2 ? '视频' : '') }}
			</el-text>
		</el-descriptions-item>
	</el-descriptions>
	<el-descriptions ref="ruleFormRef" :column="1" direction="vertical" v-loading="isLoading">
		<el-descriptions-item v-if="formInline?.inspectionMode !== 1" width="50%" :label='titles.inspectContent'>
			<el-text>
				{{ isNullOrEmpty(formInline?.inspectContent) }}
			</el-text>

		</el-descriptions-item>
	</el-descriptions>
	<el-descriptions ref="ruleFormRef" :column="1" direction="vertical" v-loading="isLoading">
		<el-descriptions-item width="50%" :label='titles.facilitImg'>
			<!-- {{ isNullOrEmpty( formInline?.facilitImg ) }} -->
			<el-image :preview-src-list="formInline?.facilitImg" :initial-index="index"
				class="w-[100px] h-[100px] mr-[20px]" v-for="(item, index) in formInline?.facilitImg" :src="item">
				<template #error>
					<img src="@/assets/screenimg/null.png" />
				</template>
			</el-image>
		</el-descriptions-item>
	</el-descriptions>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { usePoints } from "@/common/points";
import { getInfo as settingInfo } from "@/api/operate/project-management/projectManagement/setting";
import { getInfo as drawingInfo, } from '@/api/operate/project-management/project-management/drawing-management/index';
import { addDialog } from "@/components/ReDialog";
import SjMap from "@/components/mapForm/map.vue"
import { allPoints } from '@/api/operate/project-management/projectManagement/architectural-settings/index';
import { deviceDetection } from "@pureadmin/utils";
import drawingPoints from '@/views/operate/project-management/project-management/architectural-settings/drawingPoints.vue'
import { ref } from "vue";
import { titles } from './index';
import { usePageVariablesStoreHook } from '@/store/modules/pageVariables'
import type { infoType } from '@/api/operate/project-management/projectManagement/facility-management/index';
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}
const formRef = ref();
const labelMarkers = ref() //已经标记过的点位
const formState = reactive({
	center: [],
	drawingPoint: {}
})
const drawingPointsRefs = ref()
const operate = usePageVariablesStoreHook().getOperate()
const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const ruleFormRef = ref();
onMounted(() => {
	setTimeout(() => {
		images()
	}, 300);
})
function getRef() {
	return ruleFormRef.value;
}
//获取图纸
const images = () => {
	if (props.formInline.drawingId && props.formInline.position == 1) {
		getImg()
	} else {
		getSettinginfo()
	}
}
const bgImg = ref()
const getImg = () => {
	console.log(props.formInline, "详情数据")
	//如果是室内
	drawingInfo({ id: props.formInline.drawingId }).then(res => {
		if (res.code == 200) {
			bgImg.value = res.result.img
			//  console.log("huoss",bgImg.value,res);

		}
	})
}
const getSettinginfo = () => {
	settingInfo().then(res => {
		if (res.code == 200) {
			bgImg.value = res.result.projectPlan
		}
	})
}
//图纸标记详情
const openDrawingPoints = () => {
	images()
	let changeMarker = []
	const dp = props.formInline.drawingPoint
	if (Object.keys(dp).length > 2 && dp.lat !== '' && dp.lng !== '') {
		changeMarker = [dp]
	}
	addDialog({
		title: `图纸标点`,
		width: "1100px",
		draggable: true,
		hideFooter: true,
		props: {
			isShowPopup: false,
			changeMarker: changeMarker, //添加，修改的标点
			markerArr: [], //已经添加过的标点
			bgImg: bgImg.value
		},
		fullscreen: deviceDetection(),
		fullscreenIcon: true,
		closeOnClickModal: false,
		open: ({ options, index }) => {
			//获取已经标记过的点位
			//   allPoints({ projectId: operate.checkedProject }).then(res => {
			//     let markers = res.result.map(item => item.drawingPoint);
			//     markers = markers.filter(item => item.lng !== '' && item.lat !== '')
			//     drawingPointsRefs.value.setFixedMarkers(markers)
			//   })
			usePoints("facilit").getMarkerPoints(true, changeMarker, { projectId: operate.checkedProject, drawingId: props.formInline.position == 1 ? props.formInline.drawingId : '', buildingId: props.formInline.position == 1 ? props.formInline.buildingId : '' }).then(res => {
				drawingPointsRefs.value.setFixedMarkers(res)
			})
		},
		contentRenderer: () => h(drawingPoints, {
			ref: drawingPointsRefs,
			"onUpdate:changeMarker": (val) => {
				formState.drawingPoint = val[0]
			}
		}),
	})


}

const edit = () => {
	openDialog("")
}
const openDialog = (title = "项目编辑") => {
	let bg = ref()
	let bounds = ref()
	
	allPoints({ projectId: operate.checkedProject }).then(res => {
		settingInfo().then(res1 => {
			bg.value = res1.result.projectPlan
			bounds.value = res1.result.bounds
			labelMarkers.value = res.result.map(item => ({ lng: item.markPoint.lng, lat: item.markPoint.lat }));
			// console.log("获取已经标记过的点位", labelMarkers.value);
			formState.center = [props.formInline.markPoint.lng, props.formInline.markPoint.lat]
			addDialog({
				title: '地图标记',
				width: "800px",
				draggable: true,
				hideFooter: true,
				props: {
					center: formState.center,
					isEdit: false,
					showCreatePoly: false,
					labelMarkers: labelMarkers.value,
					image: bg.value,
					bounds: bounds.value
				},
				fullscreen: deviceDetection(),
				fullscreenIcon: true,
				closeOnClickModal: false,
				contentRenderer: () => h(SjMap, {
					ref: formRef,
					"onUpdate:center": (val) => {
						formState.center = val
					},
				}),
			})
		})
	})
}
defineExpose({ getRef });
</script>
